<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        background="#fff"
        :labelWidth="120"
        :hasPermiEdit="['system:organization:bankEdit']"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script lang="tsx" setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import { getSubZhEn, formatBankCard } from "@/utils/mUtils.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  sysSiteBankAccountList: [],
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        content: [
          {
            x: 0,
            y: 0,
            w: 8,
            h: 1,
            i: "1",
            label: "开户行名称(中)",
            prop: "bankName",
            type: "label_input",
            span: 8,
            maxlength: 100,
          },
          {
            x: 8,
            y: 0,
            w: 16,
            h: 1,
            i: "2",
            label: "开户行地址(中)",
            prop: "address",
            type: "label_input",
            maxlength: 500,
            span: 16,
          },
          {
            x: 0,
            y: 1,
            w: 8,
            h: 1,
            i: "3",
            label: "开户行名称(英)",
            prop: "bankNameEn",
            type: "label_input",
            span: 8,
            maxlength: 200,
          },
          {
            x: 8,
            y: 1,
            w: 16,
            h: 1,
            i: "4",
            label: "开户行地址(英)",
            prop: "addressEn",
            type: "label_input",
            maxlength: 500,
            span: 16,
          },
          {
            x: 0,
            y: 2,
            w: 8,
            h: 1,
            i: "5",
            label: "国际代码",
            prop: "swiftCode",
            type: "label_input",
            span: 8,
            maxlength: 11,
          },
        ],
      },
    ],
  },
  {
    title: "",
    structure: [
      {
        type: "tabel",
        tableIndex: 0,
        prop: "sysSiteBankAccountList",
        column:4,
        hasPermiAdd: ["system:organization:accountAdd"],
        hasPermiEdit: ["system:organization:accountEdit"],
        hasPermiDelete: ["system:organization:accountDelete"],
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            field: "account",
            title: "银行账户",
            editRender: {},
            slots: { edit: "input_edit" },
            formatter: ({ cellValue }) => {
              return formatBankCard(cellValue);
            },
            span: 2,
          },
          {
            field: "currencyCode",
            title: "币别",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.currencyName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.currencyName;
            },
            span: 1,
          },
          {
            field: "status",
            title: "启用状态",
            slots: {
              default: ({ row }) => {
                return [
                  <el-switch
                    v-model={row.status}
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dcdfe694"
                    active-value="1"
                    inactive-value="0"
                  ></el-switch>,
                ];
              },
            },
            span: 1
          },
        ],
        editRules: {
          account: [
            {
              required: true,
              message: "请输入银行帐户",
            },
          ],
          currencyCode: [
            {
              required: true,
              message: "请选择币种",
            },
          ],
        },
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
        keepSourceKey: "account",
      },
    ],
  },
]);
const rules = ref({
  bankName: [
    {
      required: true,
      message: i18n.global.t("请输入开户行名称(中)"),
      trigger: "change",
    },
  ],
  address: [
    {
      required: true,
      message: i18n.global.t("请输入开户行地址(中)"),
      trigger: "change",
    },
  ],
});
onMounted(() => {
  formData.value = { ...props.currRow };
  getSubZhEn({
    code: "003",
  }).then((res) => {
    formColumns.value[1].structure[0].columns[2].params.options = res["003"];
  });
});
const onSubmit = () => {
  const params = {
    ...formData.value,
    sysSiteBankAccountList: formData.value.sysSiteBankAccountList.map(
      (item) => {
        return {
          ...item,
        };
      }
    ),
  };
  emits("onSubmit", params);
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
